﻿<html>
<head>
<title>WebSockets Client</title>
<style>
body {  
    font-family:Arial, Helvetica, sans-serif;  
}  
#container{  
    border:5px solid grey;  
    width:800px;
    margin:0 auto;
    padding:10px;
}  
#chatLog{  
    padding:5px;
    border:1px solid black;
}  
#chatLog p {
    margin:0;
}  
.event {  
    color:#999;  
}  
.warning{  
    font-weight:bold;  
    color:#CCC;  
} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var socket;
    var host = "ws://localhost:14502/";
    $(document).ready(function () {

        if (!("WebSocket" in window)) {
            $('#chatLog, input, button, #examples').fadeOut("fast");
            $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
        } else {
            //The user has WebSockets  
            var host = "ws://localhost:14502/";
            connect(host);

            function connect() {
                try {
                    socket = new WebSocket(host);
                    message('<p class="event">Socket Status: ' + socket.readyState);

                    socket.onopen = function () {
                        message('<p class="event">Socket Status: ' + socket.readyState + ' (open) ' + new Date());
                    }

                    socket.onmessage = function (msg) {
                        message('<p class="message">Received: ' + msg.data);
                    }

                    socket.onclose = function () {
                        message('<p class="event">Socket Status: ' + socket.readyState + ' (closed) ' + new Date());
                    }

                } catch (exception) {
                    message('<p>Error' + exception);
                }

                function send() {
                    var text = $('#text').val();
                    if (text == "") {
                        message('<p class="warning">Please enter a message');
                        return;
                    }
                    try {
                        socket.send(text.toString());
                        message('<p class="event">Sent: ' + text);
                    } catch (exception) {
                        message('<p class="warning">');
                    }
                    $('#text').val("");
                }

                function message(msg) {
                    $('#chatLog').append(msg + '</p>');
                }

                $('#text').keypress(function (event) {
                    if (event.keyCode == '13') {
                        send();
                    }
                });

                $('#disconnect').click(function () {
                    socket.close();
                });
            } //End connect  
        } //End else  
    });

    function echo() {
        try {
            socket.send("ECHO test!");
            message('<p class="event">Sent: ECHO test');
        } catch (exception) {
            message('<p class="warning">');
        }
    }
</script>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <h1>WebSockets Test</h1>
        <div id="chatLog">
        </div><!-- #chatLog --> 
        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>
        <button id="Button1" onclick="echo()">ECHO</button>
    </div><!-- #container -->
</div>
</body>
</html>